<template>
  <div>
    骑手订单情况：
  </div>
  <e-charts className="chart" :option="option"/>
</template>

<script setup>
import {onMounted, ref} from "vue";
import myaxios from "../Axios/myaxios";

// 定义图表的配置
const option = ref({
  title: {
    text: '你好，至减管理员',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      type: 'pie',
      radius: '50%',
      data: [
        {value: 0, name: '所有需要的订单 (0)'},  // 初始值为 0
        {value: 0, name: '所有已接受的订单 (0)'},
        {value: 0, name: '所有已送达的订单 (0)'},
        {value: 0, name: '骑手取消的订单 (0)'},
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
});

// 定义需要的订单数据
const xuyao = ref([]);
const yijieshou = ref([]);
const yisongda = ref([]);
const quxiao = ref([]);

// 获取骑手订单数据并更新图表
onMounted(() => {
  myaxios.get('/rider/riderSelectOrders', {})
      .then(response => {
        xuyao.value = response.data;
        const length = xuyao.value.length;
        option.value.series[0].data[0].value = length;
        option.value.series[0].data[0].name = `所有需要的订单 (${length})`;
      })
      .catch(error => {
        console.error("获取订单数据失败", error);
      });

  myaxios.get('/rider/riderSelectAllWaitOrders', {})
      .then(response => {
        yijieshou.value = response.data;
        const length = yijieshou.value.length;
        option.value.series[0].data[1].value = length;
        option.value.series[0].data[1].name = `所有已接受的订单 (${length})`;
      });

  myaxios.get('/rider/riderSelectAllGetOrders', {})
      .then(response => {
        yisongda.value = response.data;
        const length = yisongda.value.length;
        option.value.series[0].data[2].value = length;
        option.value.series[0].data[2].name = `所有已送达的订单 (${length})`;
        console.log("订单数量:yisongda", length);
      })
      .catch(error => {
        console.error("获取订单数据失败yisongda", error);
      });

  myaxios.get('/rider/riderSelectAllCancelByMyself', {})
      .then(response => {
        quxiao.value = response.data;
        const length = quxiao.value.length;
        option.value.series[0].data[3].value = length;
        option.value.series[0].data[3].name = `骑手取消的订单 (${length})`;
        console.log("订单数量:quxiao", length);
      })
      .catch(error => {
        console.error("获取订单数据失败quxiao", error);
      });
});
</script>

<style scoped>
</style>
<!--<template>-->
<!--  <div>-->
<!--    骑手订单情况：-->
<!--  </div>-->
<!--  <e-charts className="chart" :option="option"/>-->
<!--</template>-->

<!--<script setup>-->
<!--import {onMounted, ref} from "vue";-->
<!--import myaxios from "../Axios/myaxios";-->

<!--// 定义图表的配置-->
<!--const option = ref({-->
<!--  title: {-->
<!--    text: '你好，至减管理员',-->
<!--    left: 'center'-->
<!--  },-->
<!--  tooltip: {-->
<!--    trigger: 'item'-->
<!--  },-->
<!--  legend: {-->
<!--    orient: 'vertical',-->
<!--    left: 'left'-->
<!--  },-->
<!--  series: [-->
<!--    {-->
<!--      name: 'Access From',-->
<!--      type: 'pie',-->
<!--      radius: '50%',-->
<!--      data: [-->
<!--        {value: 0, name: '所有需要的订单 (0)'},  // 初始值为 0-->
<!--        {value: 0, name: '所有已接受的订单 (0)'},-->
<!--        {value: 0, name: '所有已送达的订单 (0)'},-->
<!--        {value: 0, name: '骑手取消的订单 (0)'},-->
<!--      ],-->
<!--      emphasis: {-->
<!--        itemStyle: {-->
<!--          shadowBlur: 10,-->
<!--          shadowOffsetX: 0,-->
<!--          shadowColor: 'rgba(0, 0, 0, 0.5)'-->
<!--        }-->
<!--      }-->
<!--    }-->
<!--  ]-->
<!--});-->

<!--// 获取骑手订单数据并更新图表-->
<!--onMounted(() => {-->
<!--  // 定义接口请求的数组-->
<!--  const requests = [-->
<!--    myaxios.get('/rider/riderSelectOrders', {}),-->
<!--    myaxios.get('/rider/riderSelectAllWaitOrders', {}),-->
<!--    myaxios.get('/rider/riderSelectAllGetOrders', {}),-->
<!--    myaxios.get('/rider/riderSelectAllCancelByMyself', {})-->
<!--  ];-->

<!--  // 使用 Promise.all 处理多个请求-->
<!--  Promise.all(requests)-->
<!--      .then(([xuyaoRes, yijieshouRes, yisongdaRes, quxiaoRes]) => {-->
<!--        // 处理所有需要的订单-->
<!--        const xuyaoLength = xuyaoRes.data.length;-->
<!--        option.value.series[0].data[0].value = xuyaoLength;-->
<!--        option.value.series[0].data[0].name = `所有需要的订单 (${xuyaoLength})`;-->

<!--        // 处理所有已接受的订单-->
<!--        const yijieshouLength = yijieshouRes.data.length;-->
<!--        option.value.series[0].data[1].value = yijieshouLength;-->
<!--        option.value.series[0].data[1].name = `所有已接受的订单 (${yijieshouLength})`;-->

<!--        // 处理所有已送达的订单-->
<!--        const yisongdaLength = yisongdaRes.data.length;-->
<!--        option.value.series[0].data[2].value = yisongdaLength;-->
<!--        option.value.series[0].data[2].name = `所有已送达的订单 (${yisongdaLength})`;-->
<!--        console.log("订单数量: yisongda", yisongdaLength);-->

<!--        // 处理骑手取消的订单-->
<!--        const quxiaoLength = quxiaoRes.data.length;-->
<!--        option.value.series[0].data[3].value = quxiaoLength;-->
<!--        option.value.series[0].data[3].name = `骑手取消的订单 (${quxiaoLength})`;-->
<!--        console.log("订单数量: quxiao", quxiaoLength);-->
<!--      })-->
<!--      .catch(error => {-->
<!--        console.error("获取订单数据失败", error);-->
<!--      });-->
<!--});-->
<!--</script>-->

<!--<style scoped>-->
<!--</style>-->
